<template>
	<view class="ts-flex ts-column ts-flex-item">
		<text class="ts-h4 ts-background-black ts-text-white ts-text-bold ts-padding">
			Banner
		</text>
		<ts-banner image="http://beidian.zengqs.com/wp-content/uploads/elementor/thumbs/1528702340969-nskg8a25k719mluunqsofubjy6efqeui98a4wb5g3c.jpg"
		 height="250"></ts-banner>

		<text class="ts-h4 ts-background-black ts-text-white ts-text-bold ts-padding">
			Icon
		</text>
		<view class="ts-row ts-padding">
			<ts-icon type="person" color="#666666" size="50"></ts-icon>
			<ts-icon type="personadd" color="#666666" size="50"></ts-icon>
			<ts-icon type="person-filled" color="#666666" size="50"></ts-icon>
			<ts-icon type="phone" color="#666666" size="50"></ts-icon>
			<ts-icon type="email" color="#666666" size="50"></ts-icon>
			<ts-icon type="chatbubble" color="#666666" size="50"></ts-icon>
			<ts-icon type="chatboxes" color="#666666" size="50"></ts-icon>
			<ts-icon type="weibo" color="#666666" size="50"></ts-icon>
			<ts-icon type="weixin" color="#666666" size="50"></ts-icon>
			<ts-icon type="chat" color="#666666" size="50"></ts-icon>
			<ts-icon type="qq" color="#666666" size="50"></ts-icon>
		</view>

		<text class="ts-h4 ts-background-black ts-text-white ts-text-bold ts-padding">
			Badge
		</text>
		<view class="ts-row ts-padding">
			<ts-badge text="primary" type="primary"></ts-badge>
			<ts-badge text="success" type="success" padding-left="20"></ts-badge>
			<ts-badge text="danger" type="danger" padding-left="20"></ts-badge>
			<ts-badge text="warning" type="warning" padding-left="20"></ts-badge>
		</view>
		<view class="ts-row ts-padding">
			<ts-badge text="primary" type="primary" :inverted="true"></ts-badge>
			<ts-badge text="success" type="success" :inverted="true" padding-left="20"></ts-badge>
			<ts-badge text="danger" type="danger" :inverted="true" padding-left="20"></ts-badge>
			<ts-badge text="warning" type="warning" :inverted="true" padding-left="20"></ts-badge>
		</view>
		<text class="ts-h4 ts-background-black ts-text-white ts-text-bold ts-padding">
			Feedback Star
		</text>
		<view class="ts-row ts-padding">
			<ts-feedback-star score="4" activeColor="#FFB400"></ts-feedback-star>
		</view>

		<text class="ts-h4 ts-background-black ts-text-white ts-text-bold ts-padding">
			Search Bar
		</text>

		<view class="ts-row ts-padding">
			<ts-search-bar v-model="keywords" placeholder="检索全部"></ts-search-bar>
		</view>

		<text class="ts-h4 ts-background-black ts-text-white ts-text-bold ts-padding">
			Image uploader
		</text>
		<ts-image-uploader count="5"></ts-image-uploader>

		<text class="ts-h4 ts-background-black ts-text-white ts-text-bold ts-padding">
			Scroll message
		</text>
		<ts-scroll-message :messages="messages"></ts-scroll-message>
		<ts-scroll-message :messages="messages" :vertical="false">
			<block slot="icon">
				<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
			</block>
		</ts-scroll-message>

		<text class="ts-h4 ts-background-black ts-text-white ts-text-bold ts-padding">
			Ad 广告
		</text>
		<ts-ad>
			<ts-banner image="http://beidian.zengqs.com/wp-content/uploads/elementor/thumbs/1528702340969-nskg8a25k719mluunqsofubjy6efqeui98a4wb5g3c.jpg"
			 height="200"></ts-banner>
		</ts-ad>

		<text class="ts-h4 ts-background-black ts-text-white ts-text-bold ts-padding">
			Tag
		</text>
		<view class="ts-row ts-padding">
			<ts-tag text="云计算" type="warning"></ts-tag>
      <ts-tag text="云计算" type="danger"></ts-tag>
      <ts-tag text="云计算" type="success"></ts-tag>
      <ts-tag text="云计算" type="primary"></ts-tag>
		</view>
    
   
		<text class="ts-h4 ts-background-black ts-text-white ts-text-bold ts-padding">
			Button
		</text>
		<view class="ts-row" style="width: 100%;">
			<ts-button type="primary">测试</ts-button>
			<ts-button type="success">测试</ts-button>
			<ts-button type="warning">测试</ts-button>
			<ts-button type="danger">测试</ts-button>
		</view>
		<view class="ts-row" style="width: 100%;">
			<ts-button type="primary" :disabled="true">Disabled</ts-button>
			<ts-button type="success" :disabled="true">Disabled</ts-button>
			<ts-button type="warning" :disabled="true">Disabled</ts-button>
			<ts-button type="danger" :disabled="true">Disabled</ts-button>
		</view>

		<view class="ts-row" style="width: 100%;">
			<ts-button type="primary" :outlined="true" :border-radius="10">
				<ts-icon type="email" :size="28" color="#F00"></ts-icon><text>测试</text>
			</ts-button>
			<ts-button type="success" :outlined="true" :border-radius="10">
				<ts-icon type="email" :size="28" color="#F00"></ts-icon><text>测试</text>
			</ts-button>
			<ts-button type="warning" :outlined="true" :border-radius="10">
				<ts-icon type="email" :size="28" color="#F00"></ts-icon><text>测试</text>
			</ts-button>
			<ts-button type="danger" :outlined="true" :border-radius="10">
				<ts-icon type="email" :size="28" color="#F00"></ts-icon><text>测试</text>
			</ts-button>
		</view>


	</view>
</template>

<script>
	import tsAd from '@/components/teaset/components/ts-ad.vue';
	import tsBadge from "@/components/teaset/components/ts-badge.vue";
	import tsBanner from "@/components/teaset/components/ts-banner.vue";
	import tsButton from '@/components/teaset/components/ts-button.vue';
	import tsCityPicker from '@/components/teaset/components/ts-city-picker.vue';
	import tsDrawer from "@/components/teaset/components/ts-drawer.vue";
	import tsIcon from "@/components/teaset/components/ts-icon.vue";
	import tsImageUploader from '@/components/teaset/components/ts-image-uploader.vue';
	import tsLeftCategory from '@/components/teaset/components/ts-left-category.vue';
	import tsLoadMore from "@/components/teaset/components/ts-load-more.vue";
	import tsPopup from "@/components/teaset/components/ts-popup.vue";
	import tsPopupAd from "@/components/teaset/components/ts-popup-ad.vue";
	import tsSegmentedControl from "@/components/teaset/components/ts-segmented-control.vue";
	import tsSearchBar from "@/components/teaset/components/ts-search-bar.vue";
	import tsTimeline from '@/components/teaset/components/ts-timeline.vue';
	import tsTimelineItem from '@/components/teaset/components/ts-timeline-item.vue';
	import tsFeedbackStar from '@/components/teaset/components/ts-feedback-star.vue';
	import tsScrollMessage from '@/components/teaset/components/ts-scroll-message.vue';
	import tsTag from '@/components/teaset/components/ts-tag.vue'
	export default {
		components: {
			tsAd,
			tsBadge,
			tsBanner,
			tsButton,
			tsCityPicker,
			tsDrawer,
			tsIcon,
			tsImageUploader,
			tsLeftCategory,
			tsLoadMore,
			tsPopup,
			tsPopupAd,
			tsScrollMessage,
			tsSegmentedControl,
			tsSearchBar,
			tsTimeline,
			tsTimelineItem,
			tsFeedbackStar,
			tsTag,
		},
		data: {
			keywords: '',
			messages: [
				'消息1',
				'消息2',
				'消息3',
			]
		}
	}
</script>

<style>
	page view {
		font-size: 36upx;
		display: flex;
		flex-direction: row;
	}
</style>
